<template>
  <div>
    <el-form ref=“form” :model="gongcheng" >
      <el-card class="box-card" >
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="animate__bounceIn">
              <el-card class="box-card">
                <div class="card-header" >
                  <el-tag type="success" size="medium" class="input">钢筋和混凝土指标</el-tag>
                  <el-form-item label="混凝土强度">
                    <el-select v-model="gongcheng.c" placeholder="请选择标号" @change="Hung">
                      <el-option label="C20" value="20"></el-option>
                      <el-option label="C25" value="25"></el-option>
                      <el-option label="C30" value="30"></el-option>
                      <el-option label="C35" value="35"></el-option>
                      <el-option label="C40" value="40"></el-option>
                      <el-option label="C45" value="45"></el-option>
                      <el-option label="C50" value="50"></el-option>
                      <el-option label="C55" value="55"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="纵筋强度等级">
                    <el-select v-model="gongcheng.HRB" placeholder="请选择强度" @change="Hrb">
                      <el-option label="HRB235" value="235"></el-option>
                      <el-option label="HRB335" value="335"></el-option>
                      <el-option label="HRB400" value="400"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="混凝土抗压强度设计值fck">
                    <el-input v-model="gongcheng.fck" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="混凝土抗拉强度设计值ft">
                    <el-input v-model="gongcheng.ft" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="混凝土弹性模量 Ec">
                    <el-input v-model="gongcheng.Ec" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="纵筋抗拉压强度设计值 fy">
                    <el-input v-model="gongcheng.fy" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="钢筋弹性模量 Es">
                    <el-input v-model="gongcheng.Es" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="系数a1(按混凝凝土结构设计规范6.2.6条)">
                    <el-input v-model="gongcheng.a1" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="系数B1(按混凝凝土结构设计规范6.2.6条)">
                    <el-input v-model="gongcheng.B1" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="相对界限受压区高度ab">
                    <el-input v-model="gongcheng.ab" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="aE">
                    <el-input v-model="gongcheng.aE" disabled placeholder></el-input>
                  </el-form-item>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="8">
            <div  class="animate__bounceIn">
              <el-card class="box-card">
                <div class="card-header">
                  <el-tag type="success" size="medium" class="input">梁截面尺寸</el-tag>
                  <el-form-item label="梁截面尺寸b(腹板宽度)">
                    <el-input v-model="gongcheng.b"></el-input>
                  </el-form-item>
                  <el-form-item label="梁截面尺寸h(梁总高度)">
                    <el-input v-model="gongcheng.h" @change="H"></el-input>
                  </el-form-item>
                  <el-form-item label="梁截面尺寸bf(翼缘宽度bf(见T型构件翼缘计算宽度))" @change="BF">
                    <el-input v-model="gongcheng.bf"></el-input>
                  </el-form-item>
                  <el-form-item label="梁截面尺寸hf( 翼缘高度hf)" @change="HF">
                    <el-input v-model="gongcheng.hf"></el-input>
                  </el-form-item>
                  <el-form-item label="混凝土保护层厚度 ca">
                    <el-input v-model="gongcheng.ca" @change="CA"></el-input>
                  </el-form-item>
                  <el-form-item label="梁有效高度 h0=h-ca">
                    <el-input v-model="gongcheng.h0" disabled placeholder></el-input>
                  </el-form-item>
                </div>

              </el-card>
            </div>
          </el-col>
          <el-col :span="8">
            <div  class="animate__bounceIn">
              <el-card class="box-card">
                <div class="card-header">
                  <el-tag type="success" size="medium" class="input">纵向钢筋</el-tag>
                  <el-form-item label="纵筋根数N">
                    <el-input v-model="gongcheng.n" @change="N"></el-input>
                  </el-form-item>
                  <el-form-item label="纵筋直径φ">
                    <el-input v-model="gongcheng.q" @change="Q"></el-input>
                  </el-form-item>
                  <el-form-item label="纵筋面积 As=N*(Pi*φ^2/4)">
                    <el-input v-model="gongcheng.As" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="纵筋承载力 Fy=fy*As">
                    <el-input v-model="gongcheng.Fy" disabled placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="翼缘混凝土承载力 Ff=α1*fc*bf*hf">
                    <el-input v-model="gongcheng.Ff" disabled placeholder></el-input>
                  </el-form-item>
                </div>
                <div>
                  <h1 v-if="this.gongcheng.Fy>this.gongcheng.Ff">受压区进入腹板，需将翼缘和腹板分开计算，此时无需验算最小配筋率！</h1>
                  <h1 v-if="this.gongcheng.Fy<this.gongcheng.Ff">受压区在翼缘内，直接按矩形截面计算，此时无需验算是否超筋！</h1>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>

        <el-card class="box-card">
          <div>
            <el-button type="success" round class="botton" @click="showDrawer">计算</el-button>
            <el-button type="danger" round class="botton" @click="deleteValue">重置</el-button>
          </div>
          <div>
            <el-dialog
              title="计算结果"
              :placement="placement"
              :closable="false"
              :visible="visible"
              @close="onClose"
            >
              <h3>分析到受压区高度为{{this.gongcheng.x}}mm,{{this.gongcheng.x_string}}</h3>
              <h3>抗弯承载力为{{this.gongcheng.Mu}}KN/m</h3>
            </el-dialog>
          </div>
        </el-card>
      </el-card>


    </el-form>
  </div>
</template>

<script>
export default {
  name: 'liang',
  data(){
    return{
      visible: false,
      placement: 'top',
      gongcheng:{
        c:"",
        HRB:"",
        b:"",
        h:"",
        bf:"",
        hf:"",
        ca:"",
        n:"",
        q:"",
        fck:"",Es:"",fy:"",ft:"",Ec:"",a1:"",B1:"",ab:"",aE:"",
        h0:"",
        As:"",Fy:'',Ff:'',
        // 计算结果
        x:"",x_string:"",
        Mu:"",
      }
    }
  },
  methods:{
    deleteValue(){
      this.gongcheng.c="",
        this.gongcheng.HRB="",
        this.gongcheng.b="",
        this.gongcheng.h="",
        this.gongcheng.bf="",
        this.gongcheng.hf="",
        this.gongcheng.ca="",
        this.gongcheng.n="",
        this.gongcheng.q="",
        this.gongcheng.fck="",
        this.gongcheng.Es="",
        this.gongcheng.fy="",
        this.gongcheng.ft="",
        this.gongcheng.Ec="",
        this.gongcheng.a1="",
        this.gongcheng.B1="",
        this.gongcheng.ab="",
        this.gongcheng.aE="",
        this.gongcheng.h0="",
        this.gongcheng.As="",
        this.gongcheng.Fy="",
        this.gongcheng.Ff="",
        this.gongcheng.x="",
        this.gongcheng.x_string="",
        this.gongcheng.Mu=""
    },
    showDrawer() {
      console.log(this.gongcheng.Fy)
      console.log(this.gongcheng.Ff)
      if (this.gongcheng.Fy>this.gongcheng.Ff){
        var a=this.gongcheng.fy*this.gongcheng.As
        var b=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.hf
        var c=this.gongcheng.bf-this.gongcheng.b
        var d=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.b
        this.gongcheng.x =[a-(b*c)]/d
        console.log(this.gongcheng.x)
        this.gongcheng.x_string ="纵筋承载力大于翼缘混凝土承载力，受压区进入腹板，推断为第二类T型梁，需将翼缘和腹板分开计算，此时无需验算最小配筋率！"
        // 计算MU
        var a1=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.b*this.gongcheng.x*(this.gongcheng.h0-0.5*this.gongcheng.x)
        var b1=this.gongcheng.a1*this.gongcheng.fck*(this.gongcheng.bf-this.gongcheng.b)*this.gongcheng.hf*(this.gongcheng.h0-0.5*this.gongcheng.hf)
        this.gongcheng.Mu=(a1+b1)/1000000

      }
      if (this.gongcheng.Fy<this.gongcheng.Ff){
        var a=this.gongcheng.fy*this.gongcheng.As
        var b=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.bf
        this.gongcheng.x =a/b
        console.log(this.gongcheng.x)
        this.gongcheng.x_string ="纵筋承载力小于翼缘混凝土承载力,受压区在翼缘内，，推断为第一类T型梁，直接按矩形截面计算，此时无需验算是否超筋!"
        // 计算MU
        var a1=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.bf*this.gongcheng.x*(this.gongcheng.h0-0.5*this.gongcheng.x)
        this.gongcheng.Mu=a1/1000000
      }
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    BF(){
      this.Hung()
    },
    HF(){
      this.Hung()
    },
    N(){
      if (this.gongcheng.q!=null){
        console.log(this.gongcheng.fy)
        this.gongcheng.As=(this.gongcheng.q/2)*(this.gongcheng.q/2)*3.14159*this.gongcheng.n
        this.gongcheng.Fy=this.gongcheng.fy*this.gongcheng.As/1000
        this.gongcheng.Ff=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.bf*this.gongcheng.hf/1000
      }
    },
    Q(){
      if (this.gongcheng.n!=null){
        this.gongcheng.As=(this.gongcheng.q/2)*(this.gongcheng.q/2)*3.14159*this.gongcheng.n
        this.gongcheng.Fy=this.gongcheng.fy*this.gongcheng.As/1000
        this.gongcheng.Ff=this.gongcheng.a1*this.gongcheng.fck*this.gongcheng.bf*this.gongcheng.hf/1000
      }
    },
    H(){
      if (this.gongcheng.h-this.gongcheng.ca<0){
        this.gongcheng.h0="保护层厚度不符合"
        return
      }
      if (this.gongcheng.ca!=null){
        this.gongcheng.h0=this.gongcheng.h-this.gongcheng.ca
        return
      }
    },
    CA(){
      if (this.gongcheng.h-this.gongcheng.ca<0){
        this.gongcheng.h0="保护层厚度不符合"
        return
      }
      if (this.gongcheng.h!=null){
        this.gongcheng.h0=this.gongcheng.h-this.gongcheng.ca
        return
      }
    },
    Hung(){
      switch (this.gongcheng.c) {
        case "20": this.gongcheng.fck="9.6",this.gongcheng.ft="1.10",this.gongcheng.Ec="25500",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "25": this.gongcheng.fck="11.9",this.gongcheng.ft="1.27",this.gongcheng.Ec="28000",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "30": this.gongcheng.fck="14.3",this.gongcheng.ft="1.43",this.gongcheng.Ec="30000",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "35": this.gongcheng.fck="16.7",this.gongcheng.ft="1.57",this.gongcheng.Ec="31500",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "40": this.gongcheng.fck="19.1",this.gongcheng.ft="1.71",this.gongcheng.Ec="32500",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "45": this.gongcheng.fck="21.1",this.gongcheng.ft="1.80",this.gongcheng.Ec="33500",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "50": this.gongcheng.fck="23.1",this.gongcheng.ft="1.89",this.gongcheng.Ec="34500",this.gongcheng.a1="1.00",this.gongcheng.B1="0.80"
          this.N()
          break
        case "55": this.gongcheng.fck="25.3",this.gongcheng.ft="1.96",this.gongcheng.Ec="35500",this.gongcheng.a1="0.99",this.gongcheng.B1="0.79"
          this.N()
          break
      }
      this.N
      this.Hrb()
    },
    Hrb(){
      switch (this.gongcheng.HRB) {
        case "235" : this.gongcheng.fy="210",this.gongcheng.Es="210000"
          this.N()
          break
        case "335" : this.gongcheng.fy="300",this.gongcheng.Es="200000"
          this.N()
          break
        case "400" : this.gongcheng.fy="360",this.gongcheng.Es="200000"
          this.N()
          break
      }
      var a=1+this.gongcheng.fy/0.0033/this.gongcheng.Es
      this.gongcheng.ab=this.gongcheng.B1/a
      this.gongcheng.aE=this.gongcheng.Es/this.gongcheng.Ec
      console.log(this.gongcheng.ab)
    }

  }
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 30px;
}
.card-header {

}
.input{
  margin-right: 10px;
  margin-left: 10px;
  /*width: 20px;*/
}
.botton{
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  font-weight: lighter;
  width: 100%;
}
</style>
